@use "sass:math";

@use "~@mdn/minimalist/sass/vars/layout";

ul.language-toggle {
  display: flex;
  gap: 0.5rem;
  height: 35px;
  list-style: none;

  @media screen and (max-width: $screen-sm) {
    text-align: inherit;
  }

  li {
    height: 35px;
  }

  .icon {
    margin: 0;
  }

  .language-icon {
    border-radius: var(--elem-radius);
    display: inline-block;
    height: 35px;
    width: 35px;

    &:hover,
    &:focus {
      background-color: theme.$mdn-light-grey300;
    }

    // always set min-width for the English link
    &.default {
      min-width: 100px;
    }

    &::before {
      background-color: theme.$mdn-light-grey900;
      content: "";
      display: block;
      height: 25px;
      margin: 0 auto;
      mask-image: url("~@mdn/dinocons/general/language.svg");
      padding: 0.5rem;
      position: relative;
      top: 4px;
      width: 25px;
    }
  }

  .view-in-english {
    display: none;

    @media screen and (max-width: $screen-sm) {
      display: block;
      position: relative;
      top: 3px;
    }
  }

  .show-desktop {
    display: none;

    @media screen and (min-width: $screen-md) {
      display: inline;
    }
  }
}
